<template>
	<view>
		<u-navbar leftIcon="" title="呼叫訂單" placeholder>
			<!-- <view class="flexright" slot="right">
				<u-icon name="search" color="#333" size="24"></u-icon>
			</view> -->
		</u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="tabList" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="mainpadding_top ffffff radius" @click="jumpdetail(item.id)" v-for="item in list.data"
				:key="item.id">
				<view class="flexbetween">
					<view class="titletext hong_text bold">#{{item.call_no}}</view>
					<view class="main_size hong_text" v-show="item.status==0">待接單</view>
					<view class="main_size hong_text" v-show="item.status==1">待服務</view>
					<view class="main_size hong_text" v-show="item.status==87">未付定金</view>
					<view class="main_size hong_text" v-show="item.status==3">待完成</view>
					<view class="main_size hong_text" v-show="item.status==4">未付尾款</view>
					<view class="main_size hong_text" v-show="item.status==88">已放棄</view>
					<view class="main_size lv_text" v-show="item.status==99">已完成</view>
				</view>
				<view class="margin_top2 flexbetween xiaohui">
					<view>{{item.order_sn}}</view>
					<view>{{secondDate(item.createtime,0,0)}}</view>
				</view>
				<view class="margin_top2 xiaolan" v-if="item.fpinfo">
					<view>發票編號：{{item.fpinfo.invoice_number}}</view>
				</view>
				<view class="flexleft margin_top2">
					<u-icon name="account" color="#ff8505" size="16"></u-icon>
					<view class="hei_text main_size margin_left2">{{item.name}} {{item.phone}}</view>
				</view>
				<view class="margin_top2 flexleft">
					<u-icon name="map" color="#ff8505" size="16"></u-icon>
					<text class="hei_text main_size margin_left2">{{item.address}}</text>
				</view>
				<view class="flexbetween margin_top2">
					<view class="flexleft">
						<u-icon name="clock" color="#ff8505" size="16"></u-icon>
						<view class="hei_text main_size margin_left2">{{secondDate(item.yuetime,0,0)}}</view>
					</view>
					<view class="flexleft">
						<image
							@click.stop="daohang(item.address)"
							class="shopPhone" src="@/static/image/system/navigation.png" mode="">
						</image>
						<image class="shopPhone margin_left2" src="@/static/image/system/phoneShop.png" mode=""
							@click.stop="phone(item.phone)"></image>
					</view>
				</view>
				<view class="flexleft" v-if="item.images">
					<view class="itemimgBox flexcenter margin_top2" v-for="(value,i) in item.images_text" :key="i"
						@click.stop="lbtpriview(i,item.images_text)">
						<image class="listleftimg radius" :src="value" mode=""></image>
					</view>
				</view>
				<view class="flexbetween margin_top" v-if="item.image">
					<view class="xiaohei main_size" >定金支付憑證</view>
					<image class="listleftimg1 radius" :src="item.image_text" mode="" @click.stop="lbtpriview(0,[item.image_text])"></image>
				</view>
				<view class="flexbetween margin_top" v-if="item.image1">
					<view class="xiaohei main_size" >尾款支付憑證</view>
					<image class="listleftimg1 radius" :src="item.image1_text" mode="" @click.stop="lbtpriview(0,[item.image1_text])"></image>
				</view>
				<view class="beizhubgc margin_top2 xiaohui" v-if="item.content">{{item.content}}</view>
				<!-- <view class="xiaohui margin_top bold textright">合計：
					<text class="xiaohuang">${{item.count_money || 0}}</text>
				</view> -->
				<view class="xiaohui margin_top bold textright" v-if="item.status==87">
					合計：
					<text class="xiaohuang">${{item.count_money || 0}}</text>
					<text>，已付：$0，</text>
					<text class="xiaohong">未付：${{item.count_money || 0}}</text>
				</view>
				<view class="xiaohui margin_top bold textright" v-if="item.status==4">
					合計：
					<text class="xiaohuang">${{item.count_money || 0}}</text>
					<text>，已付：${{item.d_money || 0}}，</text>
					<text class="xiaohong">未付：${{(Number(item.count_money) - Number(item.d_money)) || 0}}</text>
				</view>
				<view class="xiaohui margin_top bold textright" v-if="item.status==99">
					合計：
					<text class="xiaohuang">${{item.count_money || 0}}</text>
					<text>，已付：${{item.count_money || 0}}，</text>
					<text class="xiaohong">未付：0</text>
				</view>
				<view class="flexright margin_top">
					<view class="listbtnhui" v-show="item.status==0 ||item.status==3 || item.status==87" @click.stop="cancelOrder(item.id)">放棄訂單</view>
					<view class="listbtnhuang margin_left2" v-show="item.status==0" @click.stop="takingOrder(item.id)">
						確認接單</view>
					<view class="listbtnhuang margin_left2" v-show="item.status==1" @click.stop="startService(item.id)">
						開始服務</view>
					<view class="listbtnhuang margin_left2" v-show="item.status==87" @click.stop="enddjOrdercall(item.id)">已收定金</view>
					<view class="listbtnhuang margin_left2" v-show="item.status==3" @click.stop="selectService(item.id)">選擇服務</view>
					<view class="listbtnhuang margin_left2" v-show="item.status==4" @click.stop="overService(item.id)">完成服務</view>
					<view class="listbtnhui" v-show="item.status==99">查看詳情</view>
					<!-- <view class="listbtnhui" @click.stop="invoicedetail">发票明細</view> -->
					<!-- <view class="listbtnhuang margin_left2" v-show="item.status==99 && item.is_ping">查看评价</view> -->
				</view>
			</view>
		</view>
		<u-modal :show="showConfirm" showCancelButton confirmColor="#ffb800" @cancel="showConfirm=false" confirmText="確認" cancelText="取消"
			@confirm="orderConfirm">
			<view class="slot-content color_ling text_weight text">
				{{text}}
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '全部',
					badge: {
						value: 0,
					}
				}, {
					name: '待接單',
					badge: {
						value: 0,
					}
				}, {
					name: '待完成',
					badge: {
						value: 0,
					}
				}, {
					name: '未付定金',
					badge: {
						value: 0,
					}
				}, {
					name: '未付尾款',
					badge: {
						value: 0,
					}
				}, {
					name: '已完成',
					badge: {
						value: 0,
					}
				}, ],
				tabsId: 0,
				showConfirm: false,
				text: "你確定要放棄此訂單嗎？",
				page:1,
				list: {
					data: []
				},
				shop_id: uni.getStorageSync("shop_id"),
				id: "", //操作的订單id
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getorderMsg() {
				this.http.request('/api/Ordercall/orderData', 'POST', {
					shop_id: this.shop_id, //店鋪id
				}).then(res => {
					this.tabList[0].badge.value = res.data.total_num
					this.tabList[1].badge.value = res.data.djd_num
					this.tabList[2].badge.value = res.data.fwz_num
					this.tabList[3].badge.value = res.data.wfdj_num
					this.tabList[4].badge.value = res.data.wfwk_num
				})
			},
			async getList(isPage, page) {
				this.getorderMsg()
				let obj = {
					"0": "", //全部
					"1": 0, //待接單
					"2": 3, // 待完成 
					"3": 87, //未付定金
					"4": 4, //未付尾款
					"5": 99, //已完成
				}
				let res = await this.http.request('/api/Ordercall/listOrdercall', 'POST', {
					page: page || 1,
					limit: 12,
					shop_id: this.shop_id,
					status: obj[this.tabsId]
				})
				if (res.code == 1) {
					res.data.data.forEach(item => {
						this.$set(item, "images_text", [])
						item.images.split(",").forEach(value => {
							value = this.imgUrlUser + value
							item.images_text.push(value)
						})
					})
					let resList = res.data;
					let dataList = this.list;
					if (isPage == true) {
						this.list.data = dataList.data.concat(resList.data);
					} else {
						this.list = res.data
						this.list.data = resList.data;
					}
				} else if (res.code == 0) {
					this.list.data = []
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getList(true, page);
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必須要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			tabChage(e) {
				this.tabsId = e.index
				this.getList()
			},
			cancelOrder(id) { //放弃订單
				this.id = id
				this.showConfirm = true
			},
			async orderConfirm() { //確認放弃订單
				let res = await this.http.request('/api/Ordercall/endOrdercall', 'POST', {
					id: this.id
				})
				if (res.code == 1) {
					this.http.toast("放棄成功")
					this.getList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
				this.showConfirm = false
			},
			async takingOrder(id) { //確認接單
				let res = await this.http.request('/api/Ordercall/addOrdercall', 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("接單成功")
					this.getList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async startService(id) { //開始服務
				let res = await this.http.request('/api/Ordercall/fwOrdercall', 'POST', {
					id
				})
				if (res.code == 1) {
					// this.http.toast("接單成功")
					this.getList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}

			},
			async enddjOrdercall(id) { //已付定金
				let res = await this.http.request('/api/Ordercall/enddjOrdercall', 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("操作成功")
					this.getList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async overService(id) { //完成服務
				let res = await this.http.request('/api/Ordercall/Ordercallend', 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("操作成功")
					this.getList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			selectService(id) { //選擇服務
				uni.setStorageSync("order_call_id", id)
				uni.navigateTo({
					url: "/pages/callOutOrder/xuanzefw?type=1"
				})
			},
			jumpdetail(id) { //订單详情
				uni.navigateTo({
					url: "/pages/callOutOrder/dingdanxq?id=" + id
				})
			},
			invoicedetail() { //发票明細
				uni.navigateTo({
					url: "/pages/callOutOrder/fapiaomx"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.listleftimg1 {
		width: 150rpx;
		min-width: 150rpx;
		height: 150rpx;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.beizhubgc {
		padding: 15rpx 30rpx;
		background-color: #f8f8f8;
		border-radius: 15rpx;
	}
</style>